<!--
 * @Description: 大前端学习
 * @Version: H5
 * @Author: Ajax
 * @Date: 2020-04-22 19:18:53
 * @LastEditors: Ajax
 * @LastEditTime: 2020-04-22 22:00:25
 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播一角</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  #prew {
    margin-right: 300px;
  }
</style>

<body>
  <img src="images/img01.jpg" width="500" height="500" border="1">
  <br>
  <button id="prew">上一张</button><button id="next">下一张</button>
</body>
<script>
  var imgList = document.querySelector('img');
  var prewBtn = document.querySelector("#prew");
  var nextBtn = document.querySelector("#next");
  var minIndex = 1, maxIndex = 7, currentIndex = minIndex;
  nextBtn.addEventListener('click', function () {
    if (currentIndex === maxIndex) {
      currentIndex = minIndex;
    } else {
      currentIndex++;
    }
    imgList.setAttribute('src', 'images/img0' + currentIndex + '.jpg')
  })
  prewBtn.addEventListener('click', function () {
    if (currentIndex === minIndex) {
      currentIndex = maxIndex;
    } else {
      currentIndex--;
    }
    imgList.setAttribute('src', 'images/img0' + currentIndex + '.jpg')
  })

</script>

</html>